scrolling blogroll

Update: I made an easier-to-implement version of the scrolling blogroll and posted the code here. This should work for any type of blogging software or any website, and works in IE6, Firefox, and Opera.

Well, that's finally done. Took me long enough.

I'd been searching for the last several days for a way to make my various blogrolls take up less space. I wanted to move them to the right hand sidebar so that I could eventually include some ads on both sidebars, but I didn't want them to start running into the cartoons at the bottom of the page. So, I had to put them into scrolling boxes.

I liked the way that Angry in the Great White North did his blogrolls, but I couldn't see how he did it, as his style sheet is separate from his blog. However, with a little searching through his source, I managed to find the URL for his style sheet and then was able to see how he did his scrolling blogrolls.

His was the only blog I had seen that did blogrolls in this way. There was surprisingly little on the net in the way of documentation to do this technique. So, if anyone else wants to do the same thing with their blogrolls, they are going to run into the same problems that I did. Therefore, I decided to post the necessary code here.

First, in between the style and /style tags in your blog template, include the following lines:

#blogscroll {overflow: auto; display: block; overflow-x: no; overflow-y: scroll; height: 225px; width:160px; padding-right:3px; scrollbar-3dlight-color:#20B2AA; scrollbar-arrow-color:#000000; scrollbar-base-color:#87CEEB; scrollbar-track-color:#FFFFFF; scrollbar-darkshadow-color:#0000FF; scrollbar-face-color:#6495ED; scrollbar-highlight-color:#00FFFF; scrollbar-shadow-color:#A9A9A9}

In the above code, the "scrollbar-etc" parts determine the colour scheme of the scrollbars: this only works in Internet Explorer. If you directly copy those codes into your own blog, you will see (in IE) blue sliders and white background. Adjust the hexadecimal numbers that follow to match to your own blog's colour scheme (colour codes can be found here). And of course, adjust the height and width parameters to suit your own blog as well.

Then, in the sidebar section of the body of your blog template, include these lines of code:

<div id="blogscroll" align=left> <!-- blogroll or blogroll script goes here --> </div>

I hope to see more of this technique used by other blogs; some of those blogrolls are huge, and being able to scroll through them would be very nice; rather than having these incredibly lengthy lists that extend well beyond the bottom of blog entries.

Technorati Tags: Blog